<template>
  <div id="createorder">
    <top-bar :title="title"></top-bar>
    <md-tabs :titles="tabs" ref="tab" @change="onTabChange">
      <pinche ref="pinche" :key="1" @bao="gotoBao" v-if="hasPinService"></pinche>
      <baoche ref="baoche" :key="2" @pin="gotoPin" v-if="hasBaoService"></baoche>
      <dairen :key="3" ref="dairen"></dairen>
    </md-tabs>
  </div>
</template>

<script>
import '@/assets/svgs/snyc_nav_fh.svg';
import { Tabs, Dialog, Icon } from 'mand-mobile';
import {
  GET_ROUTE_INFO,
  GET_WAITING_ROUTE_LIST,
  GET_PIN_STATIONS_INFO,
  GET_BAO_STATIONS_INFO,
  GET_REMARKS
} from '@/store/actions.types';
import { CLEAR_CURRENT_CONTACT } from '@/store/mutations.types';
import { mapGetters } from 'vuex';
import Pinche from './Pinche';
import Baoche from './Baoche';
import Dairen from './Dairen';
import TopBar from '@/components/TopBar';
import XBack from 'xback';
export default {
  name: 'CreateOrder',
  components: {
    [Icon.name]: Icon,
    [Tabs.name]: Tabs,
    [Pinche.name]: Pinche,
    [Baoche.name]: Baoche,
    [Dairen.name]: Dairen,
    [TopBar.name]: TopBar
  },
  data() {
    return {
      xBack: null,
      tabs: ['拼车', '包车', '代人叫车']
    };
  },
  beforeDestroy() {
    this.$store.commit('resetRoute');
  },
  methods: {
    onTabChange(index) {
      this.$store.commit(CLEAR_CURRENT_CONTACT);
      this.$refs.dairen.reset();
      let letter = this.tabs[index];
      switch (letter) {
        case '拼车':
          this.$router.replace({
            name: 'Pinche'
          });
          this.$refs.pinche.update();
          break;
        case '包车':
          this.$router.replace({
            name: 'Baoche'
          });
          this.$refs.baoche.update();
          break;
        case '代人叫车':
          this.$router.replace({
            name: 'Dairen'
          });
          break;
      }
    },
    gotoBao() {
      if (this.hasBaoService) {
        this.$refs.tab.selectTab(this.tabs.indexOf('包车'));
      } else {
        Dialog.alert({
          title: '错误',
          content: '没有包车服务',
          confirmText: '我知道了'
        });
      }
    },
    gotoPin() {
      if (this.hasPinService) {
        this.$refs.tab.selectTab(this.tabs.indexOf('拼车'));
      } else {
        Dialog.alert({
          title: '错误',
          content: '没有拼车服务',
          confirmText: '我知道了'
        });
      }
    }
  },
  created() {
    let routeId = this.getConfirmdRoute.type
      ? this.getConfirmdRoute.type === '1'
        ? this.getConfirmdRoute.route_id
        : this.getConfirmdRoute.routeId
      : this.getConfirmdRoute.route_id;
    this.$store
      .dispatch(GET_ROUTE_INFO, routeId)
      .then(result => {
        if (typeof result === 'object') {
          let msg = result.msg.replace(/\\n/g, '<br/>');
          Dialog.confirm({
            title: '温馨提示',
            content: msg,
            confirmText: '立即加入',
            onConfirm: () => {
              window.location.href = result.url;
            }
          });
          return;
        }
        if (!this.hasPinService) {
          this.tabs.splice(this.tabs.indexOf('拼车'), 1);
        }
        if (!this.hasBaoService) {
          this.tabs.splice(this.tabs.indexOf('包车'), 1);
        }
        this.$refs.tab.selectTab(this.defaultIndex);
        this.$store.dispatch(GET_WAITING_ROUTE_LIST);
        this.$store.dispatch(GET_PIN_STATIONS_INFO);
        this.$store.dispatch(GET_BAO_STATIONS_INFO);
      })
      .catch(error => {
        Dialog.alert({
          title: '错误',
          content: error.message,
          confirmText: '确定',
          onConfirm: () => {
            this.$router.go(-1);
          }
        });
      });
  },
  computed: {
    ...mapGetters(['getConfirmdRoute', 'getRoute']),
    title: function() {
      let str = '';
      var startRoute = '';
      var endRoute = '';
      if (this.getConfirmdRoute) {
        if (this.getConfirmdRoute.start_route) {
          if (this.getConfirmdRoute.start_route.length > 3) {
            startRoute = this.getConfirmdRoute.start_route.substring(0, 3) + '...';
          } else {
            startRoute = this.getConfirmdRoute.start_route;
          }
          if (this.getConfirmdRoute.end_route.length > 3) {
            endRoute = this.getConfirmdRoute.end_route.substring(0, 3) + '...';
          } else {
            endRoute = this.getConfirmdRoute.end_route;
          }
        } else if (this.getConfirmdRoute.start_auto_name) {
          if (this.getConfirmdRoute.start_auto_name.length > 3) {
            startRoute = this.getConfirmdRoute.start_auto_name.substring(0, 3) + '...';
          } else {
            startRoute = this.getConfirmdRoute.start_auto_name;
          }
          if (this.getConfirmdRoute.end_auto_name.length > 3) {
            endRoute = this.getConfirmdRoute.end_auto_name.substring(0, 3) + '...';
          } else {
            endRoute = this.getConfirmdRoute.end_auto_name;
          }
        }

        str = startRoute + ' - ' + endRoute;
      }
      return str;
    },
    defaultIndex() {
      if (this.$route.name === 'Pinche') {
        if (this.hasPinService) {
          return this.tabs.indexOf('拼车');
        } else {
          return 0;
        }
      } else if (this.$route.name === 'Baoche') {
        if (this.hasBaoService) {
          console.log(this.tabs.indexOf('包车'));
          return this.tabs.indexOf('包车');
        } else {
          return 0;
        }
      } else {
        return this.tabs.indexOf('代人叫车');
      }
    },
    hasPinService() {
      if (this.getRoute) {
        return this.getRoute.service_type.indexOf('1') > -1;
      } else {
        return false;
      }
    },
    hasBaoService() {
      if (this.getRoute) {
        return this.getRoute.service_type.indexOf('2') > -1;
      } else {
        return false;
      }
    }
  }
};
</script>

<style lang="stylus">
#createorder {
  background-color: color-primary-background;
  min-height: 100vh;

  .md-tab-bar {
    padding: 0 100px;
  }
}
</style>
